<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <!-- :style="searchInputStyle" -->
      <el-input
            clearable
            v-model="listQuery.planNo"
            style="margin-right: 15px"
            :style="{ width: inputWid(listQuery.planNo) }"
            class="filter-item"
            placeholder="请输入工单号码"
      ></el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- table 表格 -->
    <el-table :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80"/>
      <el-table-column  label="检验员" prop='userName' align="center"/>
      <el-table-column  label="工序名称"  prop="processName"   align="center"/>
      <el-table-column  label="工单号码" prop='orderNo' align="center"/>
      <el-table-column  label="物料品号" prop='technologyNo' align="center"/>
      <el-table-column  label="加工数量" prop='scanCount' align="center"/>
      <el-table-column  label="检验状态" prop='examineType' align="center"/>
      <el-table-column  label="抽检数" prop='examineSize' align="center"/>
      <el-table-column  label="抽检不良数" prop='examineNumber' align="center" width="100"/>
      <el-table-column  label="问题描述" prop='disqualificationDesc' align="center"/>
      <el-table-column  label="问题图片" align="center" width="100">
        <template slot-scope="scope">
            <el-image v-for="(item, index) in scope.row.imageUrl" :key='index' style="width: 30px; height: 30px" :src="item" :preview-src-list="scope.row.imageUrl" fit="scale-down">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
        </template>
      </el-table-column>
      <el-table-column  label="处理结果" prop='examineResult' align="center"/>
      <el-table-column  label="改善措施" prop='improvementMeasure' align="center"/>
      <el-table-column  label="流程卡照片" prop='flowPhoto' align="center" width="100">
        <template slot-scope="scope">
            <el-image v-for="(item, index) in scope.row.flowPhoto" :key='index' style="width: 30px; height: 30px" :src="item" :preview-src-list="scope.row.flowPhoto" fit="scale-down">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
        </template>
      </el-table-column>
      <el-table-column  label="检验时间" prop='createTime' align="center"/>
      <!-- 对数据进行编辑操作 -->
      <!-- <el-table-column  fixed="right" label="操作" align="center" width="100">
        <template slot-scope="scope" >
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column> -->
      </el-table>
   
   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <el-button type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>
    
  </div>
</template>

<script>
import { getDisqualificationPage } from '@/api/qualityQuery.js'
export default {
    name: 'CNCquality',
    data () {
        return {
            listQuery: {
                type: '1',                                  //获取数控质检
                planNo: '',                                 //工单号码
                page: 1,                                    //页码
                limit: 10                                   //每页多少条记录
            },
            formLabelWidth: '100px',
            searchInputStyle: 'width: 150px;margin-right:15px;',
            total: 0,                                      //数据的总数
            tableInfo: [],
            dialogFormVisible: false,
            loadingList: false,
            loading: false
        }
    },
    watch: {
      /* 监听table数据对象 */
      tableInfo(val){
        console.log('更新table组件')
        // this.doLayout();
      }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
        /* 重新渲染table组件 */
        doLayout(){
          let that = this
          this.$nextTick(() => {
            that.$refs.table.doLayout()
          })
        },
        transformDat(res) {
          const mapInfo = {
            index: '序号',
            userName: '检验员',
            processName: '工序名称',
            scanJobNumber: '责任人工号',
            planNo: '工单号码',
            technologyNo: '物料品号',
            scanCount: '加工数量',
            examineType: '检验状态',
            examineSize: '抽检数',
            examineNumber: '抽检不良数',
            disqualificationDesc: '问题描述',
            examineResult: '处理结果',
            improvementMeasure: '改善措施',
            ultimately1: '原因分析',
            ultimately2: '备注',
            createTime: '检验时间',
            imageUrl: '问题图片',
            flowPhoto: '流程卡照片',
            ultimately: '检验报告照片',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          console.log(props)
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          return { header, data }
        },
        // 导出excel
        async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          query.page = 1
          query.limit = 10000
          console.log('%c导出excel传的参数query:','color:green;font-size:16px;')

          let arr = await getDisqualificationPage(query)
          if(!arr.data.records.length) {
             this.$message({
                  message: '暂无数据',
                  type: 'warning'
              })
              this.loading = false
              return
          }
          arr.data.records.forEach(item => {
            item.examineType = item.examineType == 1?'首检':
                               item.examineType == 2?'巡检':'终检'
                  
          });
          const { header, data } = this.transformDat(this.setSort(arr.data.records))
            import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '数控质检excel', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
              index: index+1,
              userName: item.userName,
              processName: item.processName,
              scanJobNumber: item.scanJobNumber,
              planNo: item.planNo,
              technologyNo: item.technologyNo,
              scanCount: item.scanCount,
              examineType: item.examineType,
              examineSize: item.examineSize,
              examineNumber: item.examineNumber,
              disqualificationDesc: item.disqualificationDesc,
              examineResult: item.examineResult,
              improvementMeasure: item.improvementMeasure,
              createTime: item.createTime,
              ultimately1: '',
              ultimately2: '',
              imageUrl: item.imageUrl,
              flowPhoto: item.flowPhoto,
              ultimately: '',
            }
            arr1.push(obj)
          })
          return arr1
        },
        // 切割图片url组成的字符串成为数组
        cuttingStr(value) {
          console.log(value)
            let imageArr = []                           //存储图片url的数组
            if(value != '' && value != null) {                           //第一层嵌套判断是否有图片，为空直接返回一个空数组
                if(value.includes('|')){
                  imageArr = value.split('|')             //第二层嵌套将图片拆分为数组
                } else{
                  imageArr.push(value)
                }
                return imageArr
            } else {
                return imageArr
            }
        },
        async handleFilter() {
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            let data = await getDisqualificationPage(query)
            if(data.code == '1'){
                this.total = data.data.total
                this.tableInfo = data.data.records
                this.tableInfo.forEach(item => {
                  item.imageUrl = this.cuttingStr(item.imageUrl)
                  item.flowPhoto = this.cuttingStr(item.flowPhoto)
                  item.examineType = item.examineType == 1?'首检':
                                  item.examineType == 2?'巡检':'终检'
                  
                });
            } else {
              this.$message({
                  message: data.msg,
                  type: 'warning'
              })
            }
            this.loadingList = false
        },
        handleEdit(item) {
          return this.$message({
                  message: '暂不支持',
                  type: 'warning'
              })
            this.$router.push({
                path: 'CNCqualityDetail',
                name: 'CNCqualityDetail',
                params: ''
            })
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        }
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
    }
}
</script>

<style>

</style>